<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML-基础标签</title>
	</head>
	<body>
		
		<!-- 注释标签 ,网页上看不到的内容 -->
		
		<!-- 标题标签 <br />-->
		<a name="mao1"></a> <!-- 设置锚点 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<hr/>
		
		<!-- 换行标签 -->
		第一行<br/>第二行
		<hr/>
		
		<!-- 段落标签(块标签,自动换行) -->
		<p>HBuilder 是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE</p>
		<p>快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率</p>
		<hr/>
		
		<!-- 水平线标签 -->
		<hr />
		
		<!-- 字体样式标签 -->
		<strong>字体加粗</strong>
		<b>字体加粗</b>
		<em>斜体字</em>
		<i>斜体字</i>
		<hr/>
		
		<!-- 图像标签 -->
		<!--
			属性介绍:
	  			src: 图像路径;有相对路径与绝对路径
	  			alt: 图像的替代文字,当图片加载失败显示的内容
	  			title: 鼠标悬浮提示文字
	  			width: 图像宽度,默认是图片的宽度大小
	  			height: 图像高度,默认是图片的高度大小
        -->
		<img src="img/bq0000.jpg" alt="美女" title="text" width="50" height="50"/>
		<hr/>
		
		<!-- 链接标签 -->
		<!--
			属性介绍:
	  			href: 链接路径
	  			target: 链接在哪个窗口打开,常用值: _self和_blank_
        -->
		<a href="https://www.baidu.com" target="_self" >点击一下,进入百度首页</a><br />
		<a href="img/bq00001.gif" target="_self" >笑脸</a>
		<hr/>
		
		<!-- 锚标签 -->
		<a href="#mao1">跳转到锚点</a>
		<hr/>
		
		<!-- 列表标签 -->
		<!-- 
			无序列表属性介绍:
				type: 
					disc: 默认;空心圆
					circle: 实心圆
					square: 实心方形
		-->
		<ul type="square">
			<li>无序列表1</li>
			<li>无序列表2</li>
			<li>无序列表3</li>
		</ul>
		<!-- 
			有序列表属性介绍:
				type:
					1: 使用数字作为序号
					A/a: 使用大写或小写字母作为序号
					I/i: 使用大写I或小写i作为序号
		-->
		<ol type="i">
			<li>有序列表1</li>
			<li>有序列表2</li>
			<li>有序列表3</li>
		</ol>
		<!-- 定义列表-->
		<dl> <!-- 标签的实现 -->
			<dt>学院一</dt> <!-- 定义列表项 -->
			<dd>电子信息工程</dd> <!-- 定义内容 -->
			<dd>动漫设计工程</dd>
			<dt>学院二</dt>
			<dd>编程语言工程</dd>
			<dd>艺术设计工程</dd>
		</dl>
		<hr/>
		
		<!--
			表格标签属性介绍:
				表格对齐方式: 默认对齐,居中对齐,左对齐,右对齐
				单元格对齐方式: 水平对齐,垂直对齐
				table标签属性:
					align: left(左对齐),center(居中对齐),right(右对齐)
					border: 最外层边框,数值越大边框越大
					cellpadding: 单元格大小,数值越大单元格越大
					cellspacing: 单元格之间的间距,数值越大间距越大
				tr标签属性: 很少使用
					valign: top(顶端对齐),middle(居中对齐),bottom(底端对齐),baseline(基线对齐)
				td标签属性: 单元格的合并(跨行跨列)操作
					跨行(数字为几,此行往右少几个单元格): colspan="2"
					跨列(数字为几,此列往下少几个单元格): rowspan="2"
		
		-->
		<table align="center" border="1" cellpadding="10" cellspacing="0"> <!-- 表格标签 -->
			<tt> <!-- 行标签 -->
				<th>第一列标题</th> <!-- 标题标签 -->
				<th>第二列标题</th>
				<th>第三列标题</th>
			</tt>
			<tr > 
				<td colspan="2">第一行第一列单元格内容</td> <!-- 单元格标签 -->
				<td>第一行第二列单元格内容</td>
				<!--<td>第一行第三列单元格内容</td>-->
			</tr>
			<tr >
				<td>第二行第一列单元格内容</td>
				<td>第二行第二列单元格内容</td>
				<td rowspan="2">第二行第三列单元格内容</td>
			</tr>
			<tr >
				<td>第三行第一列单元格内容</td>
				<td >第三行第二列单元格内容</td>
				<!--<td>第三行第三列单元格内容</td>-->
			</tr>
		</table>
		
		
		
	</body>
</html>
